<template>
    <div class="seller">
			<div class="seller-content">
				<div class="overview">
					<div class="title">{{seller.name}}</div>
					<div class="desc">
						<star :size="36" :score="seller.score"></star><span class="text">({{seller.ratingCount}})</span><span class="text">月售{{seller.sellCount}}单</span>
					</div>
					<ul class="remark">
						<li class="block">
							<h2>起送价</h2>
							<div class="content">
								<span>{{seller.minPrice}}</span>元
							</div>
						</li>
						<li class="block">
							<h2>商家配送</h2>
							<div class="content">
								<span>{{seller.deliveryPrice}}</span>元
							</div>
						</li>
						<li class="block">
							<h2>平均配送时间</h2>
							<div class="content">
								<span>{{seller.deliveryTime}}</span>分钟
							</div>
						</li>
					</ul>
					<div class="favorite" @click="toggleFavorite">
						<i class="icon-favorite" :class="{active : favorite}"></i>
						<div>{{favoriteText}}</div>
					</div>
				</div>
				<div class="split"></div>
				<div class="bulletin">
					<div class="title">公告与活动</div>
					<div class="content">
						<p>{{seller.bulletin}}</p>
						<ul>
							<li v-for="item in seller.supports"><span class="icon" :class="classMap[item.type]"></span>{{item.description}}</li>
						</ul>
					</div>
				</div>
				<div class="split"></div>
				<div class="pics">
					<div class="title">商家实景</div>
					<div class="pic-wrapper" ref="picWrapper">
						<ul class="pic-list" ref="picList">
							<li class="pic-item" v-for="pic in seller.pics">
								<img :src="pic" width="120" height="90">
							</li>
						</ul>
					</div>
				</div>
				<div class="split"></div>
				<div class="info">
					<div class="title">商家信心</div>
					<ul>
						<li v-for="item in seller.infos">{{item}}</li>
					</ul>
				</div>
			</div>
		</div>
</template>

<script>
import BScroll from 'better-scroll';
import Star from "../star/star";
export default {
	components:{
		Star
	},
	data(){
		return {
			favorite : false
		}
	},
	props:{
		seller:Object
	},
	computed:{
		favoriteText () {
			return this.favorite ? '已收藏' : '收藏';
		}
	},
	created () {
		this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];

	},
	mounted () {
		this.$nextTick(() => {
			new BScroll(this.$refs.picWrapper,{
				scrollX: true,
				eventPassthrough: 'vertical'
			});
		})
	},
	methods :{
		toggleFavorite(){
			this.favorite = !this.favorite;
		}
	}
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/mixin.styl"
.overview
	position relative
	padding 18px
	line-height 1
	.title
		color rgb(7,17,27)
		font-size 14px
		margin-bottom 8px
	.desc
		color rgb(77,85,93)
		font-size 10px
		line-height 18px
		margin-bottom 18px
		& > *
			display inline-block
			vertical-align top
	.star
		margin-right 8px
	.text
		margin-right 12px
.remark
	display flex
	border-top 1px solid rgba(7,17,27,.1)
	padding-top 18px
	text-align center
	font-size 10px
	line-height 1
	color rgb(147,143,159)
	h2
		margin-bottom 4px
	span
		font-size 24px
	.content
		color rgb(7,17,27)
	.block
		flex 1
		border-right 1px solid rgba(7,17,27,.1)
		&:last-of-type
			border-right none
.favorite
	position absolute
	top 18px
	right 18px
	width 50px
	text-align center
	line-height 1
	i
		font-size 24px
		color #d4d6d9
		&.active
			color #f01414
	div
		margin-top 4px
		font-size 10px
		color rgb(77,58,93)
.split
	width: 100%;
	height: 16px;
	border-top: 1px solid rgba(7,17,27,.1);
	border-bottom: 1px solid rgba(7,17,27,.1);
	background: #f3f5f7;


.bulletin
	padding 18px
	.title
		color #07111b
	.content
		p
			padding 8px 12px
			font-size 12px
			line-height 2
			color rgb(240,20,20)
		li
			line-height 16px
			font-size 12px
			color rgb(7,17,27)
			padding 16px 12px
			border-top 1px solid rgba(7,17,27,.1)
	.icon
		width 16px
		height 16px
		display inline-block
		border-radius 1px
		margin-right 6px
		vertical-align middle
		background-repeat no-repeat
		background-size 100%
		&.decrease
			bg-image('decrease_4')
		&.discount
			bg-image('discount_4')
		&.guarantee
			bg-image('guarantee_4')
		&.invoice
			bg-image('invoice_4')
		&.special
			bg-image('special_4')
.pic
	&s
		padding 18px
		.title
			margin-bottom 12px
	&-wrapper
		overflow hidden
	&-list
		width 504px
	&-item
		display inline-block
		width 120px
		height 90px
		margin-right 6px
		font-size 0
.info
	padding 18px
	.title
		margin-bottom 12px
	li
		border-top 1px solid rgba(7,17,27,.1)
		font-size 12px
		line-height 16px
		padding 16px 12px
		color rgb(7,17,27)
		font-weight 200
</style>

